<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ample Admin Template - The Ultimate Multipurpose admin template </title>
		<!-- <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>  -->
		<link rel="shortcut icon" href=" img/admin-logo-dark.png" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link href="css/UIElements.css" type="text/css" rel="stylesheet" />
	    <link rel="stylesheet" type="text/css" href="css/public.css"/>
	    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/public.js"></script>
	<script type="text/javascript" src="js/UIElements.js"></script>
	<body>
		<!-- <!-- header -->
		<header> 
			 <nav>
		        <div class="nav_1">
		            <div class="nav_img" style="display: inline-block;">
		                <img src="img/logo.png"/>
		                <img class="ImgLogo" src="img/text.png"/>
		            </div>
		        </div>
		        <ul class="nav_ul">
		            <li class="preAppendLi">
		            	<div style="position: relative;">
							<span class="btnSpan">
							</span>
							<span style="display: inline-block;width:5px;height:5px;background: #ff7676;border-radius: 50%;position: absolute;left:83%;top:39%;"></span>
						</div>
		            	<i class="iconfont icon-youjian-copy"></i>
						<ul class="nav_ul_1">
		                    <li>You Have 4 New Message</li>
		                    <li>
		                        <img src="img/varun2.jpg"/>
		                        <span>Pavan Kumar</span>
		                        <p>9:30 AM</p>
		                    </li>
		                    <li>
		                        <img src="img/varun3.jpg"/>
		                        <span>Hritik Roshan</span>
		                        <p>9:20 AM</p>
		                    </li>
		                    <li>
		                        <img src="img/varun4.jpg"/>
		                        <span>Pwandeep rajan</span>
		                        <p>9:10 AM</p>
		                    </li>
		                    <li>
		                        <img src="img/varun5.jpg"/>
		                        <span>John Abraham</span>
		                        <p>9:40 AM</p>
		                    </li>
		                    <li>Sell all notifications</li>
		                </ul>
		            </li>
		            <li>
			            <div style="position: relative;">
							<span class="btnSpan">
							</span>
							<span style="display: inline-block;width:5px;height:5px;background: #ff7676;border-radius: 50%;position: absolute;left:83%;top:39%;"></span>
						</div>
		            	<i class="iconfont icon-duihao"></i>
		            	
		            	<div class="nav_ul_2"><img src="img/nav_ul_2.png"/></div>
		            </li>
		            <li><i>Mega</i></li>
		        </ul>
		        <div class="nav_user">
		            <img class="nav_userimg" src="img/varun.jpg">
		            <h3>Steave</h3>
		            <div class="nav_arror"></div>
		        </div>
		        <div class="nav_input">
		            <input type="text" placeholder="Search..."/>
		            <img src="img/bigmirror.png"/>
		        </div>
		    </nav> 
		</header>
			
		<!-- aside -->
		<div class="asideCon">
			 <div class="content">
		        <aside>
		            <ul class="aside_ul">
		                <li><i class="iconfont icon-houtai1" id="backhome"></i><span>Navigation</span></li>
		                <li class="libox">
		                    <img class="nav_userimg" src="img/varun.jpg">
		                    <span>Steve Gection</span>
		                    <b></b>
		                </li>
		                <li class="dom">
                    <a href="baipengfei.html"><h3>A</h3><h5>Baipengfei</h5></a>
                    <a href="Dashboard1.html"><h3>B</h3><h5>Zhangqifan</h5></a>
                    <a href="Dashboard3.html"><h3>C</h3><h5>Yangxu</h5></a>
                    <a href="chart.html"><h3>D</h3><h5>Liusaisai</h5></a>
                    <a href="user_card.html"><h3>E</h3><h5>Zhangyifan</h5></a>
                    <a href="UI Elements.html"><h3>F</h3><h5>Jingjing</h5></a>
                    <a href="panels-wells.html"><h3>G</h3><h5>Liudan</h5></a>
                </li>
		                <li class="libox"><i class="iconfont icon-houtaiguanli"></i><span>Dash Board</span></li>
		                <li class="libox"><i class="iconfont icon-youjian-copy"></i><span>eCommerce</span><b></b></li>
		                <li class="libox UlElements"><i class="iconfont icon-houtai-huojian"></i><span>UI Elements</span></li>
		                <li class="libox"><i class="iconfont icon-houtai-rili"></i><span>Sample Pages</span></li>
		                <li class="libox"><i class="iconfont icon-houtai-pingjia"></i><span>Apps</span><b></b></li>
		                <li class="libox"><i class="iconfont icon-houtaiguanli1"></i><span>Forms</span><b></b></li>
		                <li class="libox"><i class="iconfont icon-houtai_shuju"></i><span>Tables</span></li>
		                <li class="libox"><i class="iconfont icon-bangzhuguanli"></i><span>Charts</span><b></b></li>
		                <li class="libox"><i class="iconfont icon-houtaiguanli2"></i><span>Wid Gets</span></li>
		                <li class="libox"><i class="iconfont icon-houtai_anxia"></i><span>Icons</span></li>
		                <li class="libox"><i class="iconfont icon-houtaiweihu"></i><span>Google Map</span><b></b></li>
		                <li class="libox"><i class="iconfont icon-back-password"></i><span>Calender</span></li>
		                <li class="libox"><i class="iconfont icon-proscenium"></i><span>Gallern</span><b></b></li>
		            </ul>
		        </aside>
	   	 	</div>
		</div>
		<!-- 右栏 -->
		<div class="Bright">
		        <div class="Bright_1">
		            <span>SERVICE PANEL</span>
		            <span class="Bright_1_1">×</span>
		        </div>
		        <div class="Bright_2">
		            <div class="Bright_2_1">
		                <h3>With Light sidebar</h3>
		                <div class="Bright_2_1_1">
		                    <a href="#"></a>
		                    <a href="#"></a>
		                    <a href="#"></a>
		                    <a href="#"></a>
		                    <a href="#"></a>
		                    <a href="#"></a>
		                </div>
		            </div>
		            <div class="Bright_2_2">
		                <h3>With Dark sidebar</h3>
		                <div class="Bright_2_2_1">
		                    <a href="#"></a>
		                    <a href="#"></a>
		                    <a href="#"></a>
		                    <a href="#"></a>
		                    <a href="#"></a>
		                    <a href="#"></a>
		                </div>
		            </div>
		            <div class="Bright_2_3">
		                <h3>Chat option</h3>
		                <ul class="Bright_2_3_1">
		                    <li>
		                        <a href="#">
		                            <img src="img/varun.jpg"/>
		                            <span>
		                                Varun Dhavan
		                                <small class="text-success">online</small>
		                            </span>
		                        </a>
		                    </li>
		                    <li>
		                        <a href="#">
		                            <img src="img/varun2.jpg"/>
		                            <span>
		                                GeneLia Deshmukh
		                                <small class="text-success other1">Away</small>
		                            </span>
		                        </a>
		                    </li>
		                    <li>
		                        <a href="#">
		                            <img src="img/varun3.jpg"/>
		                            <span>
		                                Ritesh Deshmukh
		                                <small class="text-success other2">Bush</small>
		                            </span>
		                        </a>
		                    </li>
		                    <li>
		                        <a href="#">
		                            <img src="img/varun4.jpg"/>
		                            <span>
		                                Arijit Sinh
		                                <small class="text-success other3">Offline</small>
		                            </span>
		                        </a>
		                    </li>
		                    <li>
		                        <a href="#">
		                            <img src="img/varun5.jpg"/>
		                            <span>
		                                Govinda Star
		                                <small class="text-success">online</small>
		                            </span>
		                        </a>
		                    </li>
		                    <li>
		                        <a href="#">
		                            <img src="img/varun6.jpg"/>
		                            <span>
		                                John Abraham
		                                <small class="text-success">online</small>
		                            </span>
		                        </a>
		                    </li>
		                    <li>
		                        <a href="#">
		                            <img src="img/varun7.jpg"/>
		                            <span>
		                                Hritik Roshan
		                                <small class="text-success">online</small>
		                            </span>
		                        </a>
		                    </li>
		                    <li>
		                        <a href="#">
		                            <img src="img/varun8.jpg"/>
		                            <span>
		                                Pwandeep rajan
		                                <small class="text-success">online</small>
		                            </span>
		                        </a>
		                    </li>
		                </ul>
		            </div>
		        </div>
		    </div>
		<!-- section -->
		<section>
			<div class="containter_flied">
				<div class="bg_title">
					<div class="col_left col_1">
						<h4>Panels With BlockUI</h4>
											</div>
					<div class="col_right col_1">
						<!--<button class="rotatoBtn">
							<i class="rotatI "></i>
						</button> -->
						  <div class="Bheader_6" style="margin-top:0px"><img src="img/yuan.png"/></div>
						<a href="javascript:;" class="newBlank dispalyBlank">Buy Admin Now
							<span class="zheZaoCeng "></span>
						</a>
						<ol class="breadcrumb">
							<li class="hoverLi">Dashboard</li> /
							<li class="hoverLi">UI Elements</li> /
							<li class="active">Panels With BlockUI</li>
						</ol>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h4>Simple White box panels with BlockUI 
						<br>
							<small>simple, give <code style="color: #ff7676;">block</code> class to <code style="color: #ff7676;"> &lt;div class="panel"&gt; ... &lt;/div&gt; </code> and any id to the button for click event.</small>
						</h4>
						<hr>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<a href="javascript:;" class="panel-heading newBlank" id="blockBtn1">Block Panel
						</a>
						<a href="javascript:;" class="panel-heading newBlank" id="unblockBtn1">Unblock Panel
						</a>
						<div class="panel_P" id="panelP1">
							<div class="panel_P-header">Default Panel</div>
							


							<div class="wrapper">
								<div class="panel_body">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Lorem ipsum dolor sit amet，consectetur adipiscing elit。</font><font style="vertical-align: inherit;">Vestibulum Tincidunt est vitae ultrices cumsan。</font><font style="vertical-align: inherit;">Aliquam ornare lacus adipiscing，posuere lectus et，f​​ringilla augue。</font></font></p>
								</div>
								<div class="panel_footer">
									 Panel Footer 
								</div>
							</div>
						</div>
						<span class="Tanchuang1 smallTanCchuang" style="display: inline-block;padding:10px 30px;background: rgb(255,255,255);color:#ccc;position:absolute;left:33%;top:42%;font-size: 24px;text-align: center;display: none;cursor: wait;">Please Wait……</span>
						<hr>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<a href="javascript:;" class="panel-heading newBlank" id="blockBtn2">Block Panel
						</a>
						<a href="javascript:;" class="panel-heading newBlank" id="unblockBtn2">Unblock Panel
						</a>
						<div class="panel_P"  id="panelP2">
							<div class="panel_P-header">Default Panel
								<div class="panel_action">
									<div class="dropDown">
										<a href="javascript:;" class="dropDown_toggle" id="dropDownToggle">
										Dropdown 
											<span style="display:inline-block;width:0;height:0;vertical-align:middle;border:5px solid transparent;border-top-color: #626a79"></span>
										</a>
										<ul class="drop-menu" id="dropMenu">
											<li role="presentation"><a href="javascript:;">Reply</a></li>
											<li role="presentation"><a href="javascript:;">Share</a></li>
											<li role="presentation"><a href="javascript:;">Delete</a></li>
											<li class="diver" role="presentation"></li>
											<li role="presentation"><a href="javascript:;">Settings</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="wrapper">
								<div class="panel_body">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Lorem ipsum dolor sit amet，consectetur adipiscing elit。</font><font style="vertical-align: inherit;">Vestibulum Tincidunt est vitae ultrices cumsan。</font><font style="vertical-align: inherit;">Aliquam ornare lacus adipiscing，posuere lectus et，f​​ringilla augue。</font></font></p>
								</div>
								<div class="panel_footer">
									 Panel Footer 
								</div>
							</div>
							<span class="Tanchuang2  smallTanCchuang" style="display: inline-block;padding:10px 30px;background: rgb(255,255,255);color:#ccc;position:absolute;left:32%;top:42%;font-size: 24px;text-align: center;display: none;cursor: wait;">Please Wait……</span>
						</div>
						<hr>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<a href="javascript:;" class="panel-heading newBlank blockBtn3">Custom Style
						</a>
						<a href="javascript:;" class="panel-heading newBlank unblockBtn3">Unblock Panel
						</a>
						<div class="panel_P panelP3">
							<div class="panel_P-header CustomHeader">Info Panel
								<div class="spanDiv">
									<span class="close spanD"></span>
									<span class="display spanD"></span>
								</div>
							</div>
							<div class="wrapper">
								<div class="panel_body">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Lorem ipsum dolor sit amet，consectetur adipiscing elit。</font><font style="vertical-align: inherit;">Vestibulum Tincidunt est vitae ultrices cumsan。</font><font style="vertical-align: inherit;">Aliquam ornare lacus adipiscing，posuere lectus et，f​​ringilla augue。</font></font></p>
								</div>
							</div>
						</div>
						<span class="Tanchuang3  smallTanCchuang" style="display: inline-block;padding:10px 30px;background:#f6917d;color:#fff;position:absolute;left:32%;top:42%;font-size: 24px;text-align: center;display: none;cursor: wait;">Just a moment……</span>
						<hr>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<a href="javascript:;" class="panel-heading newBlank blockBtn3">Custom Style
						</a>
						<a href="javascript:;" class="panel-heading newBlank unblockBtn3">Unblock Panel
						</a>
						<div class="panel_P panelP3">
							<div class="panel_P-header SuccessHeader">Success Panel
								<div class="spanDiv">
									<span class="close spanD"></span>
									<span class="display spanD"></span>
								</div>
							</div>
							<div class="wrapper">
								<div class="panel_body">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Lorem ipsum dolor sit amet，consectetur adipiscing elit。</font><font style="vertical-align: inherit;">Vestibulum Tincidunt est vitae ultrices cumsan。</font><font style="vertical-align: inherit;">Aliquam ornare lacus adipiscing，posuere lectus et，f​​ringilla augue。</font></font></p>
								</div>
							</div>
						</div>
						<span class="Tanchuang3  smallTanCchuang" style="display: inline-block;padding:10px 30px;background:#fff;color:#ccc;position:absolute;left:32%;top:42%;font-size: 24px;text-align: center;display: none;cursor: wait;">
						<img style="display: inline-block;margin-right:5px;" src="img/busy.gif" alt=""/>Just a moment……</span>
						<hr>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<a href="javascript:;" class="panel-heading newBlank blockBtn3">Custom Style
						</a>
						<a href="javascript:;" class="panel-heading newBlank unblockBtn3">Unblock Panel
						</a>
						<div class="panel_P panelP3">
							<div class="panel_P-header PrimaryHeader">Success Panel
								<div class="spanDiv">
									<span class="close spanD"></span>
									<span class="display spanD"></span>
								</div>
							</div>
							<div class="wrapper">
								<div class="panel_body">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Lorem ipsum dolor sit amet，consectetur adipiscing elit。</font><font style="vertical-align: inherit;">Vestibulum Tincidunt est vitae ultrices cumsan。</font><font style="vertical-align: inherit;">Aliquam ornare lacus adipiscing，posuere lectus et，f​​ringilla augue。</font></font></p>
								</div>
							</div>
						</div>
						<span class="Tanchuang3  smallTanCchuang" style="display: inline-block;padding:10px 30px;background:#fff;color:#ccc;position:absolute;left:32%;top:42%;font-size: 24px;text-align: center;display: none;cursor: wait;">We are processing your request……</span>
					</div>
				</div>
			</div>
			<footer class="footer"> 2017 © Ample Admin brought to you by themedesigner.in </footer>
		</section>

	</body>	
</html>
